<template>
  <view class="hd">
    <!-- 撑开顶部高度 -->
    <view class="top_height"></view>
    <view class="top_title">
      <text>某某某第一人民医院</text>
    </view>
  </view>

  <view class="yuyue">
    <image
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png"
      mode="widthFit"
    />
  </view>
  <!-- 九宫导航 -->
  <view class="gridNav">
    <view
      @click="goCheckModule(index)"
      class="gridNav-item"
      v-for="(item, index) in gridNav"
      :key="index"
    >
      <image :src="item.image" mode="" />
      <text>{{ item.title }}</text>
    </view>
  </view>
  <view class="yuyue_gh_tj">
    <view
      class="yuyue_gh_tj_item"
      v-for="(item, index) in yuyueGH_TJ"
      :key="index"
    >
      <view class="title">
        <text>{{ item.title }}</text>
      </view>
      <view class="sub_title">
        <text>{{ item.describe }}</text>
      </view>
      <image :src="item.image" mode="" />
    </view>
  </view>
  <!-- 热门挂号 -->
  <view class="hot_gua_hao p_l_12 mt16">
    <view class="hot_gh_title">
      <text>热门挂号</text>
      <view class="more">
        <text>查看更多</text>
        <image src="/static/other/gengduo.svg" />
      </view>
    </view>
    <view class="grid_box p_r_12 mt12">
      <view
        class="grid_keshi_item"
        :style="{ background: `${item.background}` }"
        v-for="(item, index) in hotGH"
        :key="index"
      >
        <text>{{ item.title }}</text>
        <image :src="item.image" mode="aspectFit" />
      </view>
    </view>
  </view>
  <!-- 健康自测 -->
  <view class="self_JianKang p_l_12 mt16">
    <!-- 自测标题 -->
    <view class="hot_gh_title">
      <text>健康自测</text>
    </view>
    <!-- 健康自测模块  -->
    <view class="self_JianKang_list p_r_12 mt12">
      <view
        class="self_JianKang_item p_l_12 p_t_12 bg_white"
        v-for="(item, index) in selfJianKang"
        :key="index"
        :class="index === 0 ? 'spect_txt' : 'no_spect_txt'"
        :style="{
          background: `url(${item.image}) no-repeat right bottom`,
          backgroundSize: `35% 80%`,
        }"
      >
        <view class="main_title">{{ item.name }}</view>
        <view class="self_desc">{{ item.describe }}</view>
        <view class="self_detail">
          <view class="self_txt">
            <text>{{ item.number_of_people }}</text
            >人测过
          </view>
          <text>{{ item.question }}题</text>/{{ item.minute }}分钟
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getHomeApi } from "@/http/api";
import type {
  accineItem,
  Gua_TJ,
  HotGH_KeShi,
  Self_JianKang,
} from "@/tsDataType/dataType";

const top_height = ref("");
const title_height = ref("");

//九宫格数据
const gridNav = ref<accineItem[]>([]);
//const 预约挂号和健康体检数组
const yuyueGH_TJ = ref<Gua_TJ[]>([]);
//热门挂号
const hotGH = ref<HotGH_KeShi[]>([]);
//健康自测
const selfJianKang = ref<Self_JianKang[]>([]);

onMounted(() => {
  getMenuInfo();
  getHomeFn();
});

//九宫格导航跳转对应模块
const goCheckModule = (index: number) => {
  console.log(index);

  switch (index) {
    case 0:
      uni.navigateTo({
        url: "/pages/xinguan/index",
      });
      break;
    case 1:
      uni.navigateTo({
        url: "/pages/hpv/index",
      });
      break;

    // case 2:xx
    case 3:
      uni.navigateTo({
        url: "/pages/tuwen/index",
      });
      break;
  }
};

//ts接口
interface MenuInfo {
  top: number;
  height: number;
}

//获取顶部样式方法
const getMenuInfo = () => {
  const res: MenuInfo = uni.getStorageSync("menu_info");
  top_height.value = res.top + "px";
  title_height.value = res.height + "px";
};

//获取首页数据
const getHomeFn = async () => {
  const res = await getHomeApi();
  console.log("home-res:", res);
  //九宫格数据
  gridNav.value = res.data.data[0].vaccine;
  //预约挂号和健康体检数组
  yuyueGH_TJ.value = res.data.data[1].reserve;
  //热门挂号数据
  hotGH.value = res.data.data[2].popular;
  //健康自测
  selfJianKang.value = res.data.data[3].self_test;
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
  font-size: 14px;
  background: rgb(244, 243, 243);
}

.hd {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.top_height {
  height: v-bind(top_height);
}

.top_title {
  height: v-bind(title_height);
  line-height: v-bind(title_height);
  color: #fff;
  padding-left: 20rpx;
}

.yuyue {
  width: 100%;
  image {
    display: block;
    width: 100%;
    height: 500rpx;
  }
}

.gridNav {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.gridNav-item {
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.yuyue_gh_tj {
  display: flex;
  justify-content: space-around;

  .yuyue_gh_tj_item {
    position: relative;
    border-radius: 14rpx;
    width: 340rpx;
    height: 200rpx;
    padding: 20rpx 0 0 10rpx;
    .title {
      font-weight: bold;
      font-size: 24px;
    }
    .sub_title {
      color: #fff;
      margin-top: 14rpx;
    }
    &:nth-of-type(1) {
      .title {
        color: #00f;
      }

      background: linear-gradient(
        to right,
        rgb(179, 223, 242),
        rgb(13, 152, 251)
      );
    }
    &:nth-of-type(2) {
      .title {
        color: rgb(240, 127, 52);
      }
      background: linear-gradient(
        to right,
        rgb(239, 218, 155),
        rgb(240, 197, 68)
      );
    }
    image {
      width: 180rpx;
      height: 120rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

//热门挂号样式

.hot_gh_title {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  .more {
    display: flex;
    align-items: center;
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.grid_box {
  display: grid;
  //一行显示几列,1fr，代表重每列宽度均等
  grid-template-columns: repeat(3, 1fr);
  //每行的高度
  grid-auto-rows: 150rpx;
  //水平，垂直方向间距都为20rpx
  grid-gap: 20rpx;
  .grid_keshi_item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 14rpx;
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.self_JianKang_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200rpx;
  grid-gap: 20rpx;
  position: relative;
  .self_JianKang_item {
    border-radius: 10rpx;
    color: #ccc;
    .main_title {
      font-size: 18px;

      color: #000;
      font-weight: bold;
    }

    &.spect_txt {
      .self_detail {
        display: flex;
        margin-top: 10rpx;

        .self_txt:after {
          content: "/";
        }
      }
    }

    &.no_spect_txt {
      .self_txt {
        color: #f00;
        transform: translateY(80rpx);
      }
    }

    &:nth-of-type(1) {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  }
}
</style>
